// DOM 元素加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 为所有服务卡片添加淡入动画
    const serviceCards = document.querySelectorAll('.card-shadow');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in');
                observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.1
    });
    
    serviceCards.forEach(card => {
        observer.observe(card);
    });
    
    // 表单验证
    const contactForm = document.querySelector('form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 简单的表单验证
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const subject = document.getElementById('subject').value;
            const message = document.getElementById('message').value;
            
            if (!name || !email || !subject || !message) {
                alert('请填写所有必填字段');
                return;
            }
            
            // 简单的邮箱格式验证
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                alert('请输入有效的邮箱地址');
                return;
            }
            
            // 模拟表单提交
            const submitButton = contactForm.querySelector('button[type="submit"]');
            const originalText = submitButton.innerHTML;
            
            submitButton.disabled = true;
            submitButton.innerHTML = '<span class="loading mr-2"></span> 发送中...';
            
            // 模拟API请求延迟
            setTimeout(() => {
                submitButton.innerHTML = '<i class="fa fa-check mr-2"></i> 发送成功';
                submitButton.classList.remove('bg-primary');
                submitButton.classList.add('bg-green-500');
                
                // 重置表单
                contactForm.reset();
                
                // 恢复按钮状态
                setTimeout(() => {
                    submitButton.disabled = false;
                    submitButton.innerHTML = originalText;
                    submitButton.classList.remove('bg-green-500');
                    submitButton.classList.add('bg-primary');
                }, 3000);
            }, 1500);
        });
    }
    
    // 为导航项添加活动状态
    const sections = document.querySelectorAll('section');
    const navLinks = document.querySelectorAll('nav a');
    
    window.addEventListener('scroll', function() {
        let current = '';
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            if (window.pageYOffset >= (sectionTop - 150)) {
                current = section.getAttribute('id') || '';
            }
        });
        
        navLinks.forEach(link => {
            link.classList.remove('text-primary', 'bg-primary/10');
            link.classList.add('text-gray-700');
            
            const href = link.getAttribute('href') || '';
            if (href === `#${current}`) {
                link.classList.remove('text-gray-700');
                link.classList.add('text-primary', 'bg-primary/10');
            }
        });
    });
    
    // 为所有按钮添加点击波纹效果
    const buttons = document.querySelectorAll('button, a[href="#"]');
    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            // 只有非链接按钮添加波纹效果
            if (this.tagName === 'BUTTON' || (this.tagName === 'A' && this.getAttribute('href') === '#')) {
                const ripple = document.createElement('span');
                const rect = this.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;
                
                ripple.style.width = ripple.style.height = `${size}px`;
                ripple.style.left = `${x}px`;
                ripple.style.top = `${y}px`;
                ripple.classList.add('ripple');
                
                const rippleEffect = this.getElementsByClassName('ripple')[0];
                if (rippleEffect) {
                    rippleEffect.remove();
                }
                
                this.appendChild(ripple);
            }
        });
    });
    
    // 为页面添加键盘快捷键支持
    document.addEventListener('keydown', function(e) {
        // Alt + Home 返回首页
        if (e.altKey && e.key === 'Home') {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
        // Escape 键关闭移动端菜单
        else if (e.key === 'Escape') {
            const mobileMenu = document.getElementById('mobile-menu');
            if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('hidden');
            }
        }
    });
});

// 添加波纹效果的样式
const style = document.createElement('style');
style.textContent = `
.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}
`;
document.head.appendChild(style);